<template>
	<view>
		<view class="jinecontent">
			<view class="status_bar">
			  <!-- 这里是状态栏 -->
			</view>
			<uni-nav-bar @clickLeft="back" left-icon="back" background-color="transparent" border="false" color="#ffffff" title="资源包"></uni-nav-bar>
			<view class="" style="padding:40rpx 60rpx 0 60rpx">
				<view class="jine">
					<view class="jinetext">剩余天数</view>
					<view class="jinemoney">{{tianshuYue}}天</view>
				</view>
			</view>
		</view>
		<view class="ziyuanbao">
			<view class="ziyuanbaobiaoti">
				资源包
			</view>
			<view class="" style="padding:0 30rpx 30rpx;">
				<view class="uni-flex ziyuanbaoselect" >
					<view class="oneziyuanbao" v-bind:class="{select:selectZiyuan==1}" @tap="selectZiyuanfun(1,99,270)">
						<view class="ziyuanbao-jine">270元</view>
						<view class="ziyuanbao-tianshu">90天</view>
					</view>
					<view class="oneziyuanbao" v-bind:class="{select:selectZiyuan==2}" @tap="selectZiyuanfun(2,180,480)">
						<view class="ziyuanbao-jine">480元</view>
						<view class="ziyuanbao-tianshu">180天</view>
					</view>
					<view class="oneziyuanbao" v-bind:class="{select:selectZiyuan==3}" @tap="selectZiyuanfun(3,360,840)">
						<view class="ziyuanbao-jine">840元</view>
						<view class="ziyuanbao-tianshu">360天</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shuoming">
			从付款日起，购买天数内发布任务不收取平台服务费
		</view>
		<view class="" style="padding:0 54rpx 80rpx;">
			<submitButtom text="购买" :buttonMethod="submit"></submitButtom>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import submitButtom from "@/components/submit-button/submit-button.vue"
	export default {
		components:{
			submitButtom
		},
		data() {
			return {
				tianshu:66,
				selectZiyuan:1,
				tianshu:90,
				uid:uni.getStorageSync("token"),
				jine:270,
				tianshuYue:0
			}
		},
		onLoad:function(){
			var userInfo = uni.getStorageSync("userInfo");
			if(userInfo.tianshu==undefined || userInfo.tianshu=='' ){
				this.tianshuYue = 0;
			}else{
				this.tianshuYue = userInfo.tianshu;
			}
		},
		methods: {
			back:function(){
				uni.navigateBack();
			},
			submit:function(){
				var that = this;
				that.$util.nuiAjax(that.$jiekou.goumaiziyuanbao,{uid:that.uid,jine:that.jine,tianshu:that.tianshu},function(res){
					if(res.result == 'true'){
						that.$refs.uToast.show({
							title: "购买成功",
							duration:1000
						});
						that.tianshuYue = res.data;
						var userInfo = uni.getStorageSync("userInfo");
						userInfo.tianshu =  res.data;
						uni.setStorageSync("userInfo",userInfo);
						uni.$emit("updateJine");
					}else{
						that.$refs.uToast.show({
							title: res.message,
							duration:2000
						});
					}
					
				});
			},
			selectZiyuanfun:function(index,tianshu,jine){
				this.selectZiyuan = index;
				this.tianshu = tianshu;
				this.jine = jine;
			}
		}
	}
</script>

<style lang="scss">
	.shuoming{
		height:34rpx;
		font-size:24rpx;
		font-weight:500;
		color:rgba(255,149,0,1);
		line-height:34rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	.ziyuanbao-jine{
		// height:34rpx;
		font-size:24rpx;
		font-weight:400;
		color:rgba(34,34,34,1);
		line-height:34rpx;
		padding-left: 22rpx;
		padding-top: 18rpx;
	}
	.oneziyuanbao{
		width:212rpx;
		height:128rpx;
		background:#F6F7F8;
		box-shadow:0px 0px 12rpx 0px rgba(246,247,248,1);
		border-radius:12rpx;
		margin-bottom: 30rpx;
	}
	.select{
		border:2rpx solid rgba(50,145,248,1);
	}
	.ziyuanbao-tianshu{
		height:50rpx;
		font-size:36rpx;
		font-weight:500;
		color:rgba(34,34,34,1);
		line-height:50rpx;
		padding-top: 8rpx;
		padding-left: 22rpx;
	}
	.ziyuanbaoselect{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ziyuanbao{
		background-color: $uni-text-color-inverse;
		border-radius:18rpx 18rpx 0rpx 0rpx;
		position: relative;
		top:-54rpx;
	}
	page{
		background-color: $page-bg-color;
	}
	.ziyuanbaobiaoti{
		// height:28rpx;
		font-size:28rpx;
		font-weight:500;
		color:rgba(34,34,34,1);
		line-height:28rpx;
		padding: 40rpx 0 40rpx 54rpx;
	}
	.jinecontent{
		width: 100%;
		height: 482rpx;
		background: url(../../static/image/beijingziyuanbao.png) no-repeat;
		background-size: 100%;
	}
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
	}
	.jine{
		height: 280rpx;
	}
	.jinetext{
		color: $uni-text-color-inverse;
		// height:44rpx;
		font-size:32rpx;
		font-weight:400;
		line-height:44rpx;
		text-align: center;
		padding-top: 40rpx;
	}
	.jinemoney{
		color: $uni-text-color-inverse;
		text-align: center;
		padding-top: 20rpx;
		height:56rpx;
		font-size:40rpx;
		font-weight:500;
		line-height:56px;
	}
</style>
